import {useState} from 'react';
import {fizzBuzz} from '../utils/fizzBuzz';
import styled from 'styled-components';

function calNumber(number, value) {
	if (typeof value === 'number') {
		return value * 10 + number;
	}
	return number;
}

export function FizzBuzz() {
	const [value, setValue] = useState(0);
	return (
		<div>
			<Result data-testid="result">{value}</Result>
			<ButtonPanel>

				{
					[7, 8, 9, 4, 5, 6, 1, 2, 3, 0].map((number) => (
						<Button data-testid={number} onClick={() => {
							let newValue = calNumber(number, value);
							setValue(newValue);
						}}>{number}</Button>
					))
				}
				<Button data-testid="C" onClick={() => setValue(0)}>C</Button>
				<Button data-testid="=" onClick={() => setValue(fizzBuzz(value))} orrange>=</Button>
			</ButtonPanel>
		</div>
	);
}


const Result = styled.section`
  background-color: #858694;
  color: white;
  text-align: right;
  font-weight: 200;
  font-size: 2.5rem;
  padding: 20px;
`;

const ButtonPanel = styled.div`
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-content: center;
  background-color: #858694;
`;

const Button = styled.button`
  color: ${props => (props.orrange ? '#fff' : '#000')};
  background-color: ${props => (props.orrange ? '#f5923e' : '#e0e0e0')};
  flex-basis: calc(33.3% - 1px);
  text-align: center;
  font-size: 1.5rem;
  margin: 0 1px 1px 0;
  padding: 30px 0;
`;
